<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="admin/_fragments :: head(~{::title})">
    <title>学生信息</title>
</head>

<body>

<!--头部导航-->
<nav th:replace="admin/_fragments :: menu(4)">

</nav>

<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/students}" class="teal active item">列表</a>
        </div>
    </div>
</div>


<!--中间内容-->
<div  class="m-container-small m-padded-tb-big">
    <div class="ui container">

        <div id="table-container">
            <table  class="ui compact celled teal table">
                <thead>
                <tr>
                    <th></th>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>黄仕颖</td>
                    <td>20191687310312</td>
                    <td>15607691346</td>
                    <td>
                        <a href="#" class="ui mini teal basic button">编辑</a>
                        <a href="#" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>郑晶晶</td>
                    <td>20191687310276</td>
                    <td>18189821157</td>
                    <td>
                        <a href="#" class="ui mini teal basic button">编辑</a>
                        <a href="#" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>汪庭峰</td>
                    <td>20191687310304</td>
                    <td>18279415161</td>
                    <td>
                        <a href="#" class="ui mini teal basic button">编辑</a>
                        <a href="#" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>金驰博</td>
                    <td>20191687310298</td>
                    <td>18058865116</td>
                    <td>
                        <a href="#" class="ui mini teal basic button">编辑</a>
                        <a href="#" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>周椿卿</td>
                    <td>20191687310153</td>
                    <td>18547046225</td>
                    <td>
                        <a href="#" class="ui mini teal basic button">编辑</a>
                        <a href="#" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="7">
                        <div class="ui mini pagination menu"  >
                            <div class="item"><a>首页</a></div>
                            <div class="item"><a>上一页</a></div>
                            <div class="item"><a>下一页</a></div>
                            <div class="item"><a>尾页</a></div>
                        </div>
                        <a href="#" class="ui mini right floated teal basic button">新增</a>
                    </th>
                </tr>
                </tfoot>
            </table>

            <div class="ui segment m-inline-block">
                <p >当前第1<span></span>页，总1<span></span>页，共5<span></span>条记录</p>
            </div>

        </div>

    </div>
</div>

<br>
<br>
<!--底部footer-->
<footer th:replace="admin/_fragments :: footer">

</footer>

<th:block th:replace="admin/_fragments :: script">

</th:block>

<script>

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on : 'hover'
    });

    //消息提示关闭初始化
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });

</script>
</body>
</html>